<template>
  <div class="dialog-box">
    <div class="dialog-content" v-show="isshow">
      <div class="active-data-box"></div>
      <ul>
        <li v-for="(item, index) in lists" :key="index" @click="add(item,index)" :class="{ color: addColorArr.indexOf(index) != -1}">{{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Bus } from "../../Bus";
export default {
  data() {
    return {
      lists: [
        {
          value: 95,
          name: "点击菜单",
          bgcolor: "red",
        },
        {
          value: 1.4,
          name: "阅读文章",
          bgcolor: "red",
        },
        {
          value: 10,
          name: "转发文章",
          bgcolor: "red",
        },
        {
          value: 0,
          name: "新用户注册",
          bgcolor: "red",
        },
        {
          value: 0,
          name: "合伙人转化",
          bgcolor: "red",
        },
      ],
      clist:[],
      addColorArr:[],
      delArr:[],
      idx: "",
      addcolor: false,
      isshow: false,
    };
  },
  beforeMount() {
    Bus.$on("showecharts", (value) => {
      this.isshow = value;
    });
  },
  mounted() {
    this.lists.forEach((item)=>{
      this.clist.push(item)
    })
    this.drawPie();
  },
  methods: {
    drawPie() {
      let myChart = this.$echarts.init(
        document.querySelector(".active-data-box")
      );
      myChart.setOption({
        series: [
          {
            type: "pie",
            data: this.clist,
            hoverAnimation: false,
            label: {
              show: true,
              formatter: function (arg) {
                return arg.name + "=>" + arg.value;
              },
            },
            color: [
              "rgb(109, 109, 221)",
              "rgb(114, 179, 114)",
              "lightslategray",
              "lightsalmon",
              "blue",
            ],
          },
        ],
      });
    },
    add(item,index) {
        let indexItem = this.addColorArr.indexOf(index); 
        let citem = this.delArr.indexOf(item);       
        if(indexItem == -1){
          this.addColorArr.push(index);
        }else{
          this.addColorArr.splice(indexItem,1);
        }
        if(citem == -1){
          this.delArr.push(item);
          this.clist.splice(index,1,"")
        }
        else{
          this.delArr.splice(citem,1)
          this.clist.splice(index,1,item)
        }
        this.addcolor = !this.addcolor;
      }
  },
  watch:{
    clist:{
      deep:true,
      handler(){
        this.drawPie();
      }
    }
  }
};
</script>

<style lang="less" scoped>
.dialog-content {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1111;
  left: 450px;
  top: 120px;
  width: 500px;
  height: 450px;
  background-color: #fff;
}
.active-data-box {
  width: 350px;
  height: 250px;
  border-radius: 50%;
}
ul {
  padding: 0px;
}
li {
  list-style: none;
  display: flex;
  align-items: center;
  width: 120px;
}
.color {
  color: #b3afaf;
}
</style>